<script setup lang="ts">
import List from './components/List.vue'
import axios from "axios";
import {onMounted} from "vue";
import {ref} from "vue";
import type {ResJS, TitleJS} from "./types/data";
// 	'http://geek.itheima.net/v1_0/channels'




// 定义一个TitleJS类型的数组，初始值为列表
const channelListRef = ref<TitleJS[]>([]);

const get_data = async () => {
  const res = await axios.request<ResJS>({url:'http://geek.itheima.net/v1_0/channels'})
  channelListRef.value = res.data.data.channels
}

onMounted(()=>{
  get_data() // 首次加载数据
})

let channelID = ref(0)

const changeID = (index: number) => {
  channelID.value = index
  console.log(channelID)
}

</script>


<template>
  <!-- tab切换 -->
  <van-tabs @change="changeID">
    <van-tab v-for="item in channelListRef" :key="item.id" :title="item.name">
      <!-- 文章列表组件，变量名与子组件接受的名称要一致 -->
      <List :channelID="channelID" />
    </van-tab>
  </van-tabs>

</template>


